import React, { Component } from 'react';
import { func, object } from 'prop-types';
// import { Menu } from 'antd';
import { Link, NavLink } from 'react-router-dom';
import Menu, { MenuItem } from 'react-uwp/Menu';
import { Image } from 'react-uwp/Image';
import { AsyncAttract } from '../routes/CustomHome';
import { Redirect } from 'react-router-dom';
class CustomNavbar extends Component {
  static propTypes = {
    user: object.isRequired,
    location: object.isRequired,
    history: object.isRequired,
    signOut: func.isRequired
  };

  state = {
    isOpen: false,
    menuType: '',
    menuList: [
      { label: '首页', key: '' },
      { label: '景点', key: 'attractions' },
      { label: '演出', key: 'show' },
      { label: '赛事', key: 'contest' },
      { label: '体验', key: 'local' },
      { label: '退出', key: 'signOut' }
    ]
  };

  toggle = () => {
    this.setState({
      isOpen: !this.state.isOpen
    });
  };

  onMouseOver() {
    AsyncAttract.preload();
  }

  componentDidMount() {
    const { user, logged, getUserInfo } = this.props;
    if (logged && (!user || !user.baseInfo)) {
      getUserInfo();
    }
  }

  getSelectedMenu() {
    let menuType = '';
    let { pathname } = this.props.location;
    if (pathname.charAt(0) == '/') {
      pathname = pathname.substr(1);
    }
    let attractions = ['attractions', 'attractions/detail'];
    let show = ['show'];
    let contest = ['contest'];
    let local = ['local'];
    if (attractions.indexOf(pathname) > -1) {
      menuType = 'attractions';
    } else if (show.indexOf(pathname) > -1) {
      menuType = 'show';
    } else if (contest.indexOf(pathname) > -1) {
      menuType = 'contest';
    } else if (local.indexOf(pathname) > -1) {
      menuType = 'local';
    }
    // this.setState({
    //   menuType
    // })
    return { menuType };
  }
  menuClick = key => {
    if (key != 'signOut') {
      this.context.router.history.push('/' + key);
    } else {
      this.props.signOut();
    }
  };
  menuItem(item, index, menuType) {
    // const { menuType } = this.state;
    return (
      <a
        key={index}
        className={`menuItem ${item.key == menuType ? 'active' : ''}`}
        onClick={() => this.menuClick(item.key)}
      >
        {item.label}
      </a>
    );
  }
  redirect(path) {
    this.context.router.history.replace({ pathname: path });
  }
  render() {
    const { menuType } = this.getSelectedMenu();
    const { menuList } = this.state;
    const { logged, userInfo, signout } = this.props;
    return (
      <div style={{ width: '100%', background: '#fff' }}>
        <div className="dfrcb content" style={{ height: '3.2rem' }}>
          <Image
            useLazyLoad
            offset={100}
            src={require('../assets/img/common/logo.png')}
            style={{ width: '5.2rem', height: '1.76rem' }}
          />
          <div className="dfrcb menu">
            {menuList.map((item, index) =>
              this.menuItem(item, index, menuType)
            )}
          </div>
          <div className="dfrc">
            <div className="f20 c40">
              {logged ? (
                <div className="dfrsc">
                  <div
                    onClick={() => {
                      this.props.history.push('/user/center');
                    }}
                    className="dfrsc"
                  >
                    <a className="minAvatar">
                      <img className="imgCover" src={userInfo.avatar} />
                    </a>
                    <a style={{ marginLeft: '0.4rem' }} className="cblue">
                      {' '}
                      {userInfo.nickname}
                    </a>
                  </div>
                  <a
                    className="fnormal"
                    style={{ marginLeft: '0.4rem' }}
                    onClick={() => {
                      signout();
                    }}
                  >
                    退出
                  </a>
                </div>
              ) : (
                <div>
                  <Link to="/auth/login">登录</Link>&nbsp;/&nbsp;
                  <Link to="/auth/register">注册</Link>
                  {/* <a onClick={() => this.redirect('/auth/login')}>登录</a>&nbsp;/&nbsp;<a onClick={() => this.redirect('/auth/register')}>注册</a> */}
                </div>
              )}
            </div>
            <a className="linkADM">商户入口</a>
          </div>
        </div>
      </div>
    );
  }
}
CustomNavbar.contextTypes = {
  router: object.isRequired
};
export default CustomNavbar;
